<template>
    <div class="Classification-container">
        <el-row>
            <el-col :span="6" v-for="item in Classificationdata" :key="item.id">
                <router-link :to="{ path: item.pathss }">
                    <img :src="item.src">
                     <p>{{item.Classificationmsg}}</p>
                </router-link>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {Classifical} from "@/api/index"
export default {
    name: 'Classification',
    data() {
        return {
            Classificationdata:[]
          
        };
    },
    mounted() {
        let ClassificationGet =async () =>{
            let classifs =await Classifical()
            // console.log(classifs.data.Classification);
            this.Classificationdata = classifs.data.Classification
        }
        ClassificationGet()
    },
};
</script>

<style scoped>
    .Classification-container{
        width: 400px;
        margin: 0 auto;
        margin-top: 15px;
    }
    .Classification-container a{
        text-decoration: none;
        color: black;
    }
    .Classification-container>.el-row{
        margin-bottom: 10px;
	    font-size: 0.8em;
    }
    .Classification-container>.el-row>.el-col{
       cursor: pointer;
       text-align: center;
    }
</style>